<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading_user" :title="this.$t('viewsindex.xzyh')" :total="stat.user.today">
          <a-tooltip :title="this.$t('viewsindex.zbsm')" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <trend :flag="stat.user.today>stat.user.yesterday?'up':'down'">
              <span slot="term">{{ $t('viewsindex.zrxz') }}</span>
              {{stat.user.yesterday}}
            </trend>
          </div>
          <template slot="footer">{{ $t('viewsindex.zs') }}: <span>{{stat.user.all}}</span></template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading_vip" :title="this.$t('viewsindex.xz')" :total="stat.vip.today">
          <a-tooltip :title="this.$t('viewsindex.zbsm')" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <trend :flag="stat.vip.today>stat.vip.yesterday?'up':'down'">
              <span slot="term">{{ $t('viewsindex.zrxz') }}</span>
              {{stat.vip.yesterday}}
            </trend>
          </div>
          <template slot="footer">{{ $t('viewsindex.zs') }}: <span>{{stat.vip.all}}</span></template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading_recharge" :title="this.$t('viewsindex.czje')" :total="stat.recharge.today">
          <a-tooltip :title="this.$t('viewsindex.zbsm')" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <trend :flag="stat.recharge.today>stat.recharge.yesterday?'up':'down'">
              <span slot="term">{{ $t('viewsindex.zr') }}</span>
              {{stat.recharge.yesterday}}
            </trend>
          </div>
          <template slot="footer">{{ $t('viewsindex.zs') }}: <span>{{stat.recharge.all}}</span></template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading_withdraw" :title="this.$t('viewsindex.txje')" :total="stat.withdraw.today">
          <a-tooltip :title="this.$t('viewsindex.zbsm')" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <trend :flag="stat.withdraw.today>stat.withdraw.yesterday?'up':'down'">
              <span slot="term">{{ $t('viewsindex.zr') }}</span>
              {{stat.withdraw.yesterday}}
            </trend>
          </div>
          <template slot="footer">{{ $t('viewsindex.zs') }}: <span>{{stat.withdraw.all}}</span></template>
        </chart-card>
      </a-col> 
    </a-row>
    <a-card :title="this.$t('viewsindex.drxzhy')">
      <div class="table-operator">
        {{ $t('viewsindex.gl') }}VIP:
        <a-switch :checkedChildren="this.$t('viewsindex.k')" :unCheckedChildren="this.$t('viewsindex.g')" @change="handleChange"/>
      </div>
      <a-table
        :columns="columns"
        :dataSource="data"
        :pagination="false"
        :loading="loading"
      >
        <template slot="douyin" slot-scope="text, record">
          <template>
            <div v-if="text && text.info">
              <a-popover :title="this.$t('viewsindex.xx')" placement="left" trigger="click">
                <ul slot="content">
                  <li class="douyin-bind-img"><img v-if="text.info.avatar_168x168" :src="text.info.avatar_168x168.url_list[0]" alt=""></li>
                  <li>
                    {{$t('viewsindex.gz')}}: {{text.info.following_count}}
                    {{$t('viewsindex.fs')}}: {{text.info.follower_count}}
                    {{$t('viewsindex.hz')}}: {{text.info.total_favorited}}
                    {{$t('viewsindex.zp')}}: {{text.info.aweme_count}}
                  </li>
                  <li>{{$t('viewsindex.c')}}: {{text.info.nickname}}</li>
                  <li>{{$t('viewsindex.dyh')}}: {{text.info.short_id}}</li>
                  <li>{{ $t('viewsindex.xb') }}:
                    <span v-if="text.info.gender==1">{{ $t('viewsindex.n') }}</span>
                    <span v-else-if="text.info.gender==2">{{ $t('viewsindex.n') }}</span>
                    <span v-else>{{ $t('viewsindex.wsz') }}</span>
                  </li>
                  <li>{{$t('viewsindex.sr')}}: {{text.info.birthday}}</li>
                  <li>{{$t('viewsindex.qm')}}: {{text.info.signature}}</li>
                  <li>{{$t('viewsindex.gj')}}: {{text.info.country}}</li>
                  <li>{{$t('viewsindex.wz')}}: {{text.info.location}}</li>
                  <li>{{$t('viewsindex.xx')}}: {{text.info.school_name}}</li>
                  <li style="padding-top:10px;">
                    <a-button @click="handleClickRefreshDouyin(record.bind_douyin)" :loading="loading_douyin" size="small">{{ $t('viewsindex.sx') }}</a-button>
                  </li>
                </ul>
                <a-button type="primary">{{ $t('viewsindex.ck') }}</a-button>
              </a-popover>
            </div>
            <div v-else>-</div>
          </template>
        </template>
        <template slot="detail" slot-scope="text, record">
          <template>
            <div v-if="record.realname">
              <a-popover :title="this.$t('viewsindex.xxxx')" placement="right" trigger="click">
                <ul class="detail" slot="content">
                  <li>
                    {{ $t('viewsindex.xm') }}: {{record.realname}}
                    {{ $t('viewsindex.sfzhm') }}: {{record.id_card}}
                  </li>
                  <li>
                    <dl>
                      <dt>{{ $t('viewsindex.skewm') }}</dt>
                      <dd>
                        <img v-if="record.img_qrcode" :src="$hostServer+record.img_qrcode" alt="">
                      </dd>
                    </dl>
                    <dl>
                      <dt>{{ $t('viewsindex.sfztp') }}</dt>
                      <dd>
                        <img style="margin-right:10px;" v-if="record.img_card1" :src="$hostServer+record.img_card1" alt="">
                        <img v-if="record.img_card2" :src="$hostServer+record.img_card2" alt="">
                      </dd>
                    </dl>
                  </li>
                </ul>
                <a-button type="primary">{{ $t('viewsindex.ck') }}</a-button>
              </a-popover>
            </div>
            <div v-else>
              {{ $t('viewsindex.dws') }}
            </div>
          </template>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script>
import moment from 'moment'
import { ChartCard, MiniArea, MiniBar, MiniProgress, RankList, Bar, Trend, NumberInfo, MiniSmoothArea } from '@/components'
import { mixinDevice } from '@/utils/mixin'
import i18n from '../utils/lang/index.js'
const barData = []
const barData2 = []
for (let i = 0; i < 15; i += 1) {
  barData.push({
    x: `${i + 1}`,
    y: Math.floor(Math.random() * 1000) + 200
  })
  barData2.push({
    x: `${i + 1}月`,
    y: Math.floor(Math.random() * 1000) + 200
  })
}
console.log(barData)

const rankList = []
for (let i = 0; i < 7; i++) {
  rankList.push({
    name: '白鹭岛 ' + (i + 1) + ' 号店',
    total: 1234.56 - i * 100
  })
}

const searchUserData = []
for (let i = 0; i < 7; i++) {
  searchUserData.push({
    x: moment().add(i, 'days').format('YYYY-MM-DD'),
    y: Math.ceil(Math.random() * 10)
  })
}
const searchUserScale = [
  {
    dataKey: 'x',
    alias: i18n.t('viewsindex.sj')
  },
  {
    dataKey: 'y',
    alias: i18n.t('viewsindex.yhs'),
    min: 0,
    max: 10
  }]

const searchTableColumns = [
  {
    dataIndex: 'index',
    title: i18n.t('viewsindex.pm'),
    width: 90
  },
  {
    dataIndex: 'keyword',
    title: i18n.t('viewsindex.ssgjc')
  },
  {
    dataIndex: 'count',
    title: i18n.t('viewsindex.yhs')
  },
  {
    dataIndex: 'range',
    title: i18n.t('viewsindex.zzf'),
    align: 'right',
    sorter: (a, b) => a.range - b.range,
    scopedSlots: { customRender: 'range' }
  }
]
const searchData = []
for (let i = 0; i < 50; i += 1) {
  searchData.push({
    index: i + 1,
    keyword: i18n.t("viewsindex.ssgjc")+`-${i}`,
    count: Math.floor(Math.random() * 1000),
    range: Math.floor(Math.random() * 100),
    status: Math.floor((Math.random() * 10) % 2)
  })
}

const DataSet = require('@antv/data-set')

const sourceData = [
  { item: i18n.t('viewsindex.jydq'), count: 32.2 },
  { item: i18n.t('viewsindex.syjs'), count: 21 },
  { item: i18n.t('viewsindex.ghjk'), count: 17 },
  { item: i18n.t('viewsindex.fsxb'), count: 13 },
  { item: i18n.t('viewsindex.mycp'), count: 9 },
  { item: i18n.t('viewsindex.qs'), count: 7.8 }
]

const pieScale = [{
  dataKey: 'percent',
  min: 0,
  formatter: '.0%'
}]

const dv = new DataSet.View().source(sourceData)
dv.transform({
  type: 'percent',
  field: 'count',
  dimension: 'item',
  as: 'percent'
})
const pieData = dv.rows

export default {
  name: 'Analysis',
  mixins: [mixinDevice],
  components: {
    ChartCard,
    Trend
  },
  data () {
    return {
      loading: true,
      loading_user: false,
      loading_vip: false,
      loading_recharge: false,
      loading_withdraw: false,
      loading_order_cnt: false,
      loading_order_total: false,
      loading_order_succ: false,
      loading_order_ratio: false,
      stat: {
        user: {
          today: 0,
          yesterday: 0,
          all: 0
        },
        vip: {
          today: 0,
          yesterday: 0,
          all: 0
        },
        recharge: {
          today: 0,
          yesterday: 0,
          all: 0
        },
        withdraw: {
          today: 0,
          yesterday: 0,
          all: 0
        },
        order_cnt: {
          today: 0,
          yesterday: 0,
          all: 0
        },
        order_total: {
          today: 0,
          yesterday: 0,
          all: 0
        },
        order_succ: {
          today: 0,
          yesterday: 0,
          all: 0
        },
        order_ratio: {
          today: 0,
          yesterday: 0
        }
      },
      columns: [
        {
          title: i18n.t("viewsindex.zh"),
          dataIndex: 'username',
          key: 'username',
          scopedSlots: { customRender: 'username' }
        },
        {
          title: 'VIP',
          dataIndex: 'is_vip',
          key: 'is_vip',
          scopedSlots: { customRender: 'is_vip' }
        },
        {
          title: i18n.t("viewsindex.nc"),
          dataIndex: 'nickname',
          key: 'nickname',
          scopedSlots: { customRender: 'nickname' }
        },
        {
          title: 'QQ',
          dataIndex: 'qq',
          key: 'qq',
          scopedSlots: { customRender: 'qq' }
        },
        {
          title: i18n.t("viewsindex.xxxx"),
          dataIndex: 'detail',
          key: 'detail',
          scopedSlots: { customRender: 'detail' }
        },
        {
          title: i18n.t("viewsindex.dy"),
          dataIndex: 'douyin',
          key: 'douyin',
          scopedSlots: { customRender: 'douyin' }
        },
        {
          title: i18n.t("viewsindex.kyye"),
          dataIndex: 'balance',
          key: 'balance',
          scopedSlots: { customRender: 'balance' }
        },
        {
          title: i18n.t("viewsindex.dqsj"),
          dataIndex: 'vip_expire_at',
          key: 'vip_expire_at',
          scopedSlots: { customRender: 'vip_expire_at' }
        },
        {
          title: i18n.t("viewsindex.zcrq"),
          dataIndex: 'created_at',
          key: 'created_at',
          scopedSlots: { customRender: 'created_at' }
        },
      ],
      data: [],
      rankList,
      // 搜索用户数
      searchUserData,
      searchUserScale,
      searchTableColumns,
      searchData,

      barData2,
      //
      pieScale,
      pieData,
      sourceData,
      pieStyle: {
        stroke: '#fff',
        lineWidth: 1
      },
      rankingData: {
        recharge: [],
        withdraw: [],
        order: [],
        agent: []
      },
      loadingRanking: {
        recharge: false,
        withdraw: false,
        order: false,
        agent: false
      },
      loadingBar: {
        reg: false,
        withdraw: false,
        recharge: false
      },
      barData: {
        reg: [],
        recharge: [],
        withdraw: []
      },
      is_vip: 0
    }
  },
  methods: {
    getStatUser () {
      this.loading_user = true
      let url = '/home_stat/user'
      this.$http.get(url).then(res => {
        this.stat.user = res
      }).catch(err => {
        this.$notification.error({
          message: this.$t("contentPage.sb"),
          description: err.message
        })
      }).then(() => {
        this.loading_user = false
      })
    },
    handleChange (val) {
      this.is_vip = val?1:0
      this.getUserList()
    },
    getStatVip () {
      this.loading_vip = true
      let url = '/home_stat/vip'
      this.$http.get(url).then(res => {
        this.stat.vip = res
      }).catch(err => {
        this.$notification.error({
          message: this.$t("contentPage.sb"),
          description: err.message
        })
      }).then(()=>{
        this.loading_vip = false
      })
    },
    getStatRecharge () {
      this.loading_recharge = true
      let url = '/home_stat/recharge'
      this.$http.get(url).then(res => {
        this.stat.recharge = res
      }).catch(err => {
        this.$notification.error({
          message: this.$t("contentPage.sb"),
          description: err.message
        })
      }).then(()=>{
        this.loading_recharge = false
      })
    },
    getStatWithdraw () {
      this.loading_withdraw = true
      let url = '/home_stat/withdraw'
      this.$http.get(url).then(res => {
        this.stat.withdraw = res
      }).catch(err => {
        this.$notification.error({
          message: this.$t("contentPage.sb"),
          description: err.message
        })
      }).then(() => {
        this.loading_withdraw = false
      })
    },
    getUserList () {
      this.loading = true
      let url = '/user_list?is_vip='+this.is_vip
      this.$http.get(url).then(res => {
        this.data = res
      }).catch(err => {
        this.$notification.error({
          message: this.$t('viewsindex.sb'),
          description: err.message
        })
      }).then(() => {
        this.loading = false
      })
    }

  },
  created () {
    setTimeout(() => {
      this.loading = !this.loading
    }, 10)
  },
  mounted () {
    this.getStatUser()
    this.getStatVip()
    this.getStatRecharge()
    this.getStatWithdraw()
    this.getUserList()
  }
}
</script>

<style lang="less" scoped>
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }

  .antd-pro-pages-dashboard-analysis-twoColLayout {
    position: relative;
    display: flex;
    display: block;
    flex-flow: row wrap;
  }

  .antd-pro-pages-dashboard-analysis-salesCard {
    height: calc(100% - 24px);
    /deep/ .ant-card-head {
      position: relative;
    }
  }

  .dashboard-analysis-iconGroup {
    i {
      margin-left: 16px;
      color: rgba(0,0,0,.45);
      cursor: pointer;
      transition: color .32s;
      color: black;
    }
  }
  .analysis-salesTypeRadio {
    position: absolute;
    right: 54px;
    bottom: 12px;
  }
</style>
